﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddImages.aspx.cs" Inherits="AddImages" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>REVIO</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <link href="../scripts/imagecropper/css/imgareaselect-default.css" rel="stylesheet"
        type="text/css" />
    <script src="../scripts/imagecropper/scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('img#mainimg').imgAreaSelect({
                handles: true,
                onSelectEnd: onEnd,
                maxWidth: 50,
                maxHeight: 50,
                aspectRatio: '4:4',
                x1: 0,
                y1: 0,
                x2: 50,
                y2: 50
            });
        });
        function onEnd(img, selection) {
            $('#x1').val(selection.x1);
            $('#y1').val(selection.y1);
            $('#x2').val(selection.x2);
            $('#y2').val(selection.y2);
        }
    </script>
    <style type="text/css">
        #imcrop > div
        {
            float: left;
        }
        #imgCrop
        {
            width: 90%;
            height: 200px;
        }
        #imgSubmit
        {
            width: 90%;
            height: 200px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server" style="background: url(../images/map_bg.png) repeat-x center top;
    width: 550px; height: 350px;">
    <div id="imcrop">
        <div class="imgCrop">
            <asp:Literal ID="LitImage" runat="server" />
        </div>
        <div class="imgSubmit">
            <asp:Button ID="btnCropIt" runat="server" OnClick="btnCropIt_Click" Text="შეინახე" />
        </div>
        <div id="prew">
        </div>
        <input type="hidden" runat="server" id="x1" value="" />
        <input type="hidden" runat="server" id="y1" value="" />
        <input type="hidden" runat="server" id="x2" value="" />
        <input type="hidden" runat="server" id="y2" value="" />
    </div>
    </form>
</body>
</html>
